<template>
  <div style="height: 100%;width: 100%;display: grid;grid-template-columns: 600px auto">
    <div ref="div" id="div" style="cursor: pointer;position: relative;background-color: rgba(255,255,255,0);width: 600px;height: 350px;border: 1px solid black;" @click="getMousePosition">
      <img src="@/assets/img/login.jpg" width="600px" style="z-index: -1"/>
      <template v-for="(item,i) in point">
        <span class="_point" :style="{'position': 'absolute','top': item.y,'left': item.x,'margin-top': '-4px','margin-left': '-4px'}" :key="i"></span>
      </template>
      <span v-if="form.x + form.y != 0" class="_point" :style="{'position': 'absolute','top': (form.y + '%'),'left': (form.x + '%'),'margin-top': '-4px','margin-left': '-4px'}"></span>
    </div>
    <div style="padding: 0 40px">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="坐标x">
          <my-input v-model="form.x"></my-input>
        </el-form-item>
        <el-form-item label="坐标y">
          <my-input v-model="form.y"></my-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        point: [
          {
            x: '35.3%',
            y: '20%',
          },{
            x: '25%',
            y: '20%',
          },{
            x: '35%',
            y: '35%',
          },
        ],
        form: {
          x: 0,
          y: 0,
        }
      }
    },
    methods:{
      test(){
        alert(1)
      },
      /** 获取鼠标坐标 **/
      getMousePosition(event) {
        let e = event || window.event;
        let left = this.$refs.div.getBoundingClientRect().left;
        let top = this.$refs.div.getBoundingClientRect().top;
        this.form.x = Math.round((e.clientX - left)/600 * 1000)/10;
        this.form.y = Math.round((e.clientY - top)/350 * 1000)/10;
      }
    }
  }
</script>

<style lang="scss" scoped>
  ._point{
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #409EFF;
    border-radius: 50%;
    &:hover{
      background-color: red;
    }
  }
</style>
